<template>
	<view class="page">
		<div class="myUnit">
			<u--form labelPosition="left" :rules="rules" ref="form" :model='form' labelWidth='auto'>
				<u-form-item label="处理工序" prop="currentStepName" borderBottom required>
					<picker @change="changeStep" :range="processList" range-key='proName'>
						<u--input v-model="form.currentStepName" placeholder="请选择" maxlength='20' border="none"
							disabledColor="#fff" inputAlign='right' disabled></u--input>
					</picker>
				</u-form-item>
				<div>
					<u-form-item label="处理意见" prop="result" borderBottom required v-if="form.currentStep==1">
						<picker @change="changeResult" :range="approveList" range-key='label'>
							<u--input v-model="form.result" placeholder="请选择" maxlength='30' border="none"
								disabledColor="#fff" inputAlign='right' disabled></u--input>
						</picker>
					</u-form-item>
					<u-form-item label="处理意见" prop="result" borderBottom required v-else>
						<picker @change="changeResult2" :range="approveList2" range-key='label'>
							<u--input v-model="form.result" placeholder="请选择" maxlength='30' border="none"
								disabledColor="#fff" inputAlign='right' disabled></u--input>
						</picker>
					</u-form-item>
				</div>
				<u-form-item v-if="form.result=='不合格'" label="不合格工序" prop="invalidStepName" borderBottom required>
					<picker @change="changeStep2" :range="processList" range-key='proName'>
						<u--input v-model="form.invalidStepName" placeholder="请选择" maxlength='30' border="none"
							disabledColor="#fff" inputAlign='right' disabled></u--input>
					</picker>
				</u-form-item>
				<u-form-item label="报工数量" prop="produceNum" borderBottom required v-if="form.proType==0">
					<u--input type='number' v-model="form.produceNum" placeholder="请输入" maxlength='50' border="none"
						disabledColor="#fff" inputAlign='right'></u--input>
				</u-form-item>
				<u-form-item label="合格数量" prop="validNum" borderBottom required
					v-if="form.proType==1&&form.result=='合格'">
					<u--input type='number' v-model="form.validNum" placeholder="请输入" maxlength='50' border="none"
						disabledColor="#fff" inputAlign='right'></u--input>
				</u-form-item>
				<u-form-item label="不合格数量" prop="invalidNum" borderBottom required
					v-if="form.proType==1&&form.result=='不合格'">
					<u--input type='number' v-model="form.invalidNum" placeholder="请输入" maxlength='50' border="none"
						disabledColor="#fff" inputAlign='right'></u--input>
				</u-form-item>
				<u-form-item label="上一任处理人" prop="lastOper" borderBottom required
					v-if="form.proType==1&&form.result=='不合格'">
					<picker @change="changeUSer" :range="userList" range-key='worker'>
						<u--input v-model="form.lastOper" placeholder="请选择" maxlength='20' border="none"
							disabledColor="#fff" inputAlign='right' disabled></u--input>
					</picker>
				</u-form-item>
				<u-form-item label="备注" prop="remark" borderBottom>
					<u--input v-model="form.remark" placeholder="请输入" maxlength='50' border="none" disabledColor="#fff"
						inputAlign='right'></u--input>
				</u-form-item>
			</u--form>
		</div>
		<div class="myBtn">
			<u-button type='primary' text="提交" @click="confirm()" throttleTime='1000'></u-button>
		</div>
	</view>
</template>

<script>
	import {
		getProduceProcess,
		reportProduceOrder,
		getProduceUser
	} from "@/api/orderMng/index.js"
	export default {
		data() {
			return {
				detailShow: true,
				form: {
					currentStep: '',
					currentStepName: '',
					result: "",
					invalidStep: '',
					remark: ''
				},
				rules: {
					currentStepName: [{
						required: true,
						message: '该项为必填项',
						trigger: ['blur']
					}],
					result: [{
						required: true,
						message: '该项为必填项',
						trigger: ['blur']
					}],
					invalidStep: [{
						required: true,
						message: '该项为必填项',
						trigger: ['blur']
					}]
				},
				processList: [],
				userList: [],
				approveList: [{
					id: '完成',
					label: '完成'
				}],
				approveList2: [{
						id: '合格',
						label: '合格'
					},
					{
						id: '不合格',
						label: '不合格'
					}
				]
			}
		},
		onLoad(e) {
			this.form.id = e.id
			this.form.flowId = e.flowId
			this.load()
		},
		methods: {
			load() {
				getProduceProcess(
					this.form.flowId
				).then(res => {
					this.processList = res.data.processStepList
				})
				getProduceUser(this.form.id).then(res => {
					this.userList = res.data
				})
			},
			changeUSer(e) {
				let index = e.detail.value
				this.$set(this.form, 'lastOper', this.userList[index].worker)
				this.$set(this.form, 'lastOperName', this.userList[index].workerName)
			},
			changeResult(e) {
				let index = e.detail.value
				this.$set(this.form, 'result', this.approveList[index].label)
			},
			changeResult2(e) {
				let index = e.detail.value
				this.$set(this.form, 'result', this.approveList2[index].label)
			},
			changeStep(e) {
				let index = e.detail.value
				this.$set(this.form, 'currentStep', this.processList[index].stepNo)
				this.$set(this.form, 'currentStepName', this.processList[index].proName)
				this.$set(this.form, 'proType', this.processList[index].proType)
			},
			changeStep2(e) {
				let index = e.detail.value
				this.$set(this.form, 'invalidStep', this.processList[index].stepNo)
				this.$set(this.form, 'invalidStepName', this.processList[index].proName)
			},
			confirm() {
				this.$refs.form.validate().then(res => {
					uni.showLoading({
						mask: true
					})
					reportProduceOrder(this.form).then(res => {
						uni.showToast({
							title: '报工成功',
							success() {
								setTimeout(e => {
									uni.navigateBack({
										delta: 2
									})
								}, 500)
							}
						})
					})
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.titleDiv {
		display: flex;
		justify-content: space-between;
	}

	.aBtn {
		color: #0275a1 !important;
	}

	.myText div:nth-child(1) {
		min-width: 80px;
	}

	.myText2 div:nth-child(1) {
		min-width: 80px;
	}

	.unitDiv {
		padding-bottom: 10px;
		border-bottom: 2px dashed #f3f4f5;
	}


	.myText2 {
		width: 50%;
		display: inline-block;
	}

	.myText2 div {
		display: inline-block;
	}

	.myUnit .myText2:nth-child(even) {
		text-align: right;
	}
</style>